<!--VIP设置-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>VIP设置</title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    <span></span>
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">散客开单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                         <dd><a href="Ordinary_invoicing.html" >结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        	<dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <!-- <dd><a href="Room_query.html">房间查询</a></dd> -->
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                        <!-- <dd><a href="Fuzzy_membership_query.html">模糊查询会员</a></dd> -->
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html" style="background-color: #1E90FF">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="padding: 15px;">
            <h1>VIP设置</h1><br/>
            <div class="layui-btn-group">
                <button  type="button" class="layui-btn" data-toggle="modal" data-target="#myModal">增加</button>
            </div>
            <div class="t_content" style="height: 550px;">
            <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col width="200">
                    <col width="200">
                    <col width="200">
                </colgroup>
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>手机</th>
                    <th>会员等级</th>
                    <th>优惠</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="usertbody">
                <tr>
                    <td>贤心</td>
                    <td>130xxxxxxxx</td>
                    <td>白金会员</td>
                    <td>九折</td>
                    <td><button type="button" class="layui-btn" data-toggle="modal" data-target="#myModal1">编辑<input type="hidden" value="1"/></button>
                    <button type="button" class="layui-btn">删除</button></td>
                </tr>
                </tbody>
            </table>
            
            </div>
            <div id="VIPtablepage" style="float: right;" class="t_foot">
			    		<input class="layui-btn layui-btn-sm" type="button" value="第一页"/>
			    		<input class="layui-btn layui-btn-sm" type="button" value="1" />
			    		<input class="layui-btn layui-btn-sm" type="button" value="最后一页"/>
			</div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
     <div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="z-index: 1041;">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">新增vip</h4>
      </div>
      <div class="modal-body yz">
        <form action="" enctype="multipart/form-data" method="post" role="form" class="form-horizontal" id="addvip">
        	<div class="form-group yz1">
        		<label for="name" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;姓名：</label>
        		<input style="display: inline-block;width: 240px;" type="text" class="form-control"  name="name" placeholder="姓名：" id="username">
        		<span id="tname" class="warning">姓名不能为空</span>
    		</div>
    		<div class="form-group yz2">
        		<label for="name" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电话：</label>
        		<input style="display: inline-block;width: 240px;" type="text" class="form-control"  name="mobile" placeholder="电话：" id="usermobile">
    			<span id="tphone" class="warning">请输入正确的电话</span>
    		</div>
    		<div class="form-group yz3">
        		<label for="name" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：</label>
        		<input style="display: inline-block;width: 240px;" type="text" class="form-control"  name="password" placeholder="密码：" id="userpwd">
    			<span id="tpwd" class="warning">请输入正确的密码</span>
    		</div>
    		<div class="form-group yz4">
        		<label for="name" >身份证号：</label>
        		<input style="display: inline-block;width: 240px;" type="text" class="form-control"  name="idCard" placeholder="身份证号：" id="useridcard">
    			<span id="idcard" class="warning">请输入正确的身份证号</span>
    		</div>
    		<div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" onclick="add()">提交</button>
	     	</div>
        </form>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
 <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">修改vip</h4>
      </div>
      <div class="modal-body">
        <form action="" enctype="multipart/form-data" method="post" role="form" class="form-horizontal" id="changevip">
        	<div style="display: inline-block;width: 400px;" class="form-group">
	           		<div style="margin-top: 20px;">
	           			<label for="">&nbsp;&nbsp;&nbsp;&nbsp;用户名：</label>
	           			<span id="show_name"></span>
	           		</div>
	           		<div style="margin-top: 20px;">
	           			<label for="">&nbsp;&nbsp;&nbsp;&nbsp;手机号：</label>
	           			<span id="show_phone"></span>
	           		</div>
	           		<div style="margin-top: 20px;">
	           			<label for="">&nbsp;&nbsp;&nbsp;&nbsp;身份证：</label>
	           			<span id="show_card"></span>
	           		</div>
	           		<div style="margin-top: 20px;" id="hiddenid">
	           			<label for="">&nbsp;&nbsp;&nbsp;&nbsp;消费额：</label>
	           			<span id="show_cumulative"></span>
	           		</div>
	           		<div style="margin-top: 20px;">
	           			<label for="cla.name">&nbsp;&nbsp;&nbsp;&nbsp;vip等级：</label>
	           			<select class="form-control" name="vipId" style="width: 240px;display: inline-block;" id="vip">
					        <option>大众会员</option>
					        <option>白金会员</option>
					        <option>黑卡会员</option>
					    </select>
	           		</div>
	           </div>
    		<div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" onclick="change()">提交</button>
	     	</div>
        </form>
       </div>
    </div>
  </div>
</div><!-- /.modal -->

</div>

<script src="../js/layui.all.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../bt/modal.js"></script>
<script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.min.js"></script>
<script>
	
function tan(){
	$("#webSocketModal").modal('show')
}
	$(function(){
		$(".yz span").attr("style","color: red;")
		$(".yz span").hide();
		$(".yz1").mouseleave(function(){
			var test = $(this).children("input").val();
			if(test.length==0){
				$("#tname").show()
			}
			if(test.length>0){
				$("#tname").hide()
			}
		})
		$(".yz2").mouseleave(function(){
			var tphone = /^1[3|4|5|7|8][0-9]{9}$/
			var test = $(this).children("input").val();
			if(tphone.test(test)){
				$("#tphone").hide()
			}else{
				$("#tphone").show() 
			}
		})
		$(".yz3").mouseleave(function(){
			var rpwd = /^[a-zA-Z0-9_-]{6,18}$/
			var test = $(this).children("input").val();
			if(rpwd.test(test)){
				$("#tpwd").hide()
			}else{
				$("#tpwd").show()
			}
		})
		$(".yz4").mouseleave(function(){
			var card = /^[1-9][0-7]\d{4}((19\d{2}(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(19\d{2}(0[13578]|1[02])31)|(19\d{2}02(0[1-9]|1\d|2[0-8]))|(19([13579][26]|[2468][048]|0[48])0229))\d{3}(\d|X|x)?$/
			var test = $(this).children("input").val();
			if(card.test(test)){
				$("#idcard").hide()
			}else{
				$("#idcard").show()
			}
		})
		
		
	})
	
/*加载完页面后立即发送ajax到后台查询所有会员信息*/
$(function(){
	$.ajax({
		url:"/user/1/7",
		type:"get",
		dataType:"json",
		success:function(mes){
			console.info(mes)
			var totalpage = mes.pages;
			var lastpage = mes.lastPage;
			var list = mes.list
			var str = "";
			var res = "<input onclick='page(1)' class='layui-btn layui-btn-sm' type='button' value='first'/> ";
			for (var i = 0; i < list.length; i++) {
				var dis = list[i].vipBean.discounts*10;
				if(dis==10){
					dis="不打折"
				}else{
					dis=dis+"折"
				}
				str+="<tr><td>"+list[i].name+"</td><td>"+list[i].mobile+"</td><td>"+list[i].vipBean.message+"</td><td>"+dis+
				"</td><td><button type='button' class='layui-btn' data-toggle='modal' data-target='#myModal1'>编辑<input type='hidden' value='"+list[i].id+"'/></button>"+
				"</td></tr>";
			}
			$("#usertbody").html(str)
			
			for (var i = 1; i <=totalpage; i++) {
				if(i==1){
					res+="<input onclick='page("+i+")' class='layui-btn layui-btn-primary layui-btn-sm' type='button' value='"+i+"'/>";
					continue;
				}
				res+="<input onclick='page("+i+")' class='layui-btn layui-btn-sm' type='button' value='"+i+"'/>";
			}
			res+="<input onclick='page("+lastpage+")' class='layui-btn layui-btn-sm' type='button' value='last'/> ";
			$("#VIPtablepage").html(res)
			
		}
	})
})
function page(page){
		$.ajax({
			url:"/user/"+page+"/7",
			type:"get",
			dataType:"json",
			success:function(mes){
				console.info(mes)
				var totalpage = mes.pages;
				var lastpage = mes.lastPage;
				var list = mes.list
				var str = "";
				var res = "<input onclick='page(1)' class='layui-btn layui-btn-sm' type='button' value='first'/> ";
				for (var i = 0; i < list.length; i++) {
					var dis = list[i].vipBean.discounts*10;
					if(dis==10){
						dis="不打折"
					}else{
						dis=dis+"折"
					}
					str+="<tr><td>"+list[i].name+"</td><td>"+list[i].mobile+"</td><td>"+list[i].vipBean.message+"</td><td>"+dis+
					"</td><td><button type='button' class='layui-btn' data-toggle='modal' data-target='#myModal1'>编辑<input type='hidden' value='"+list[i].id+"'/></button>"+
					"</td></tr>";
				}
				$("#usertbody").html(str)
				
				for (var i = 1; i <=totalpage; i++) {
					if(i==page){
						res+="<input onclick='page("+i+")' class='layui-btn layui-btn-primary layui-btn-sm' type='button' value='"+i+"'/>";
						continue;
					}
					res+="<input onclick='page("+i+")' class='layui-btn layui-btn-sm' type='button' value='"+i+"'/>";
				}
				res+="<input onclick='page("+lastpage+")' class='layui-btn layui-btn-sm' type='button' value='last'/> ";
				$("#VIPtablepage").html(res)
				
			}
		})	
	}
/*修改会员或新增会员后动态更新会员信息*/
function show(){
		$.ajax({
			url:"/user/1/7",
			type:"get",
			dataType:"json",
			success:function(mes){
				console.info(mes)
				var list = mes.list
				var str = "";
				for (var i = 0; i < list.length; i++) {
					var dis = list[i].vipBean.discounts*10;
					if(dis==10){
						dis="不打折"
					}else{
						dis=dis+"折"
					}
					str+="<tr><td>"+list[i].name+"</td><td>"+list[i].mobile+"</td><td>"+list[i].vipBean.message+"</td><td>"+dis+
					"</td><td><button type='button' class='layui-btn' data-toggle='modal' data-target='#myModal1'>编辑<input type='hidden' value='"+list[i].id+"'/></button>"+
					"</td></tr>";
				}
				
				$("#usertbody").html(str)
			}
		})
}
	
	
	
function add(){
	var user = JSON.stringify($("#addvip").serializeJSON());
	$.ajax({
		url:"/user",
		type:"post",
		data:user,
		contentType:"application/json;charset=utf-8",
		success:function(mes){
			alert(mes.message);
			$('#myModal').modal('hide');
			show()
		}
	})
}


function change(){
	var cvip = $("#changevip").serializeJSON()
	$.ajax({
		url:"/user/modify",
		type:"post",
		async:true,
		dataType:"json",
		contentType:"application/json;charset=utf-8",
		data:JSON.stringify(cvip),
		success:function(mes){
			alert(mes.message)
			$('#myModal1').modal('hide')
			show()
		}
	})
}

/*关闭模态框时清空会员信息*/
$('#myModal').on('hidden.bs.modal', function (e) {
	$("#username").val("")
	$("#usermobile").val("")
	$("#userpwd").val("")
	$("#useridcard").val("")
})

/*打开模态框时加载会员信息*/
$('#myModal1').on('show.bs.modal', function (e) {
	 var btn = $(e.relatedTarget).children("input").val();
	  $.ajax({
		 url:"/user/searchId?id="+btn,
		type:"get",
		async:true,
		dataType:"json",
		success:function(mes){
			console.info(mes)
			var res= mes.map.userInfo
			console.info(res)
			$("#show_name").html(res.name)
			$("#show_phone").html(res.mobile)
			$("#show_card").html(res.idCard)
			$("#show_cumulative").html(res.cumulative)
		}
	 }) 
	 $.ajax({
		 url:"/vip",
		 type:"get",
		 async:true,
		 dataType:"json",
		 success:function(mes){
			 var vips = mes.map.list;
			 console.info(vips)
			 var str = "";
			 for (var i = 0; i < vips.length; i++) {
				str+="<option value='"+vips[i].id+"'>"+vips[i].message+"会员"+"</option>"
			}
			 /* 大众会员 */
			 $("#vip").html(str)
			 $("#hiddenid").html( "<input name='id' type='hidden' value='"+btn+"' />");
		 }
	 })
	 
})
/*关闭模态框时清空会员信息*/
$('#myModal1').on('hidden.bs.modal', function (e) {
	/*  */
	$("#show_name").html("")
	$("#show_phone").html("")
	$("#show_cumulative").html("")
	$("#show_card").html("")
	
})
</script> 
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://192.168.3.103:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>